<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        font-size: 32px;
        color: #000;
      }
      h1 span {
        font-size: 24px;
        color: rgba(40, 36, 36, 0.184);
      }
      input {
        width: 300px;
      }
      .Man span {
        border: 1px solid #000;
        background: #767272;
        border-radius: 10%;
        text-align: center;
      }
      table {
        border-collapse: collapse;
      }

      td {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #000;
        font: 20px;
      }
      div {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        justify-content: center;
        align-items: center;
      }

      p {
        width: 300px;
        height: 300px;
        background: #fff;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <h1>表单 <span>Subtext for header</span></h1>
    <br />
    姓名
    <input
      name="addName"
      type="text"
      placeholder="只能包含数字字母下划线,并且数字不能开头,长度在8-16之间"
      autocomplete="off"
    /><br />

    联系电话 <input name="phone" type="text" /> <br />
    学历 <input name="eabg" type="text" /><br />
    年龄 <input name="addAge" type="text" placeholder="Amount" /><br />
    期望薪资 <input name="sept" type="text" placeholder="Amount" /><br />
    <button name="addBtn">保存</button>
    <button name="addBtn1">重置</button>

    <table>
      <thead>
        <tr>
          <!-- <td>序号</td> -->
          <td>姓名</td>
          <td>联系电话</td>
          <td>学历</td>
          <td>年龄</td>
          <td>期望薪资</td>
          <td>删除</td>
          <td>修改</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <div>
      <p>
        <br />

        姓名 <input name="changeName" type="text" autocomplete="off" /><br />
        联系电话 <input name="changephone" type="text" /> <br />
        学历 <input name="changeEabg" type="text" /><br />
        年龄 <input name="changeaddAge" type="text" /><br />
        期望薪资 <input name="changesept" type="text" /><br />
        <button name="changeBtn">修改</button>
        <button name="cancelBtn">取消</button>
      </p>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
      window.localStorage.arr = JSON.stringify([
        {
          id: 1,
          name: "张三",
          phone: "19745477894",
          eabg: "本科",
          age: "45",
          sept: "5555555",
        },
        {
          id: 2,
          name: "李四",
          phone: "18787987478",
          eabg: "博士",
          age: "45",
          sept: "5456656",
        },
        {
          id: 3,
          name: "王五",
          phone: "15151514789",
          eabg: "研究生",
          age: "45",
          sept: "54545",
        },
      ]);

      var oTbody = document.querySelector("tbody");
      var oAddBtn = document.querySelector('[name="addBtn"]');
      var oAddBtn1 = document.querySelector('[name="addBtn1"]');
      var oAddIptName = document.querySelector('[name="addName"]');
      var oAddPhone = document.querySelector('[name="phone"]');
      var oAddEabg = document.querySelector('[name="eabg"]');
      var oAddIptAge = document.querySelector('[name="addAge"]');
      var oAddSept = document.querySelector('[name="sept"]');

      //   获取一条修改操作的标签对象
      var oDiv = document.querySelector("div");
      var oChangeBtn = document.querySelector('[name="changeBtn"]');
      var oCancelBtn = document.querySelector('[name="cancelBtn"]');
      var oChangeIptName = document.querySelector('[name="changeName"]');
      var oChangePhone = document.querySelector('[name="changephone"]');
      var oChangeEabg = document.querySelector('[name="changeEabg"]');
      var oChangeAddAge = document.querySelector('[name="changeaddAge"]');
      var oChangeSept = document.querySelector('[name="changesept"]');

      //   定义变量,存储修改按钮点击时,获取的要修改的数据的id值
      var changeIndex = 0;

      // 调用函数 动态生成页面
      setPage();

      // 定义删除按钮/修改按钮的事件
      // 通过 事件委托语法实现
      oTbody.addEventListener("click", function (event) {
        if (event.target.getAttribute("name") === "del") {
          const arr = JSON.parse(window.localStorage.arr);
          if (!window.confirm("您确定要删除吗")) {
            return;
          }

          let index = Number(event.target.getAttribute("index"));

          arr.forEach(function (item, key) {
            if (item.id === index) {
              arr.splice(key, 1);
            }
          });

          window.localStorage.arr = JSON.stringify(arr);

          //   再根据新的 localstorage 动态生成页面
          setPage();
          //   判断 如果 点击的是修改按钮
        } else if (event.target.getAttribute("name") === "change") {
          const arr = JSON.parse(window.localStorage.arr);

          // 显示 修改 页面
          oDiv.style.display = "flex";

          // 获取当前修改按钮的id值
          let index = Number(event.target.getAttribute("index"));
          changeIndex = index;

          arr.forEach((item) => {
            if (item.id === index) {
              oChangeIptName.value = item.name;
              oChangePhone.value = item.phone;
              oChangeEabg.value = item.eabg;
              oChangeAddAge.value = item.age;
              oChangeSept.value = item.sept;
            }
          });
        }
      });

      //   让 修改div 隐藏
      oCancelBtn.addEventListener("click", function () {
        oDiv.style.display = "none";
      });

      //   修改
      oChangeBtn.addEventListener("click", function () {
        //   获取 标签中的数据
        let name = oChangeIptName.value;
        let phone = oChangePhone.value;
        let eabg = oChangeEabg.value;
        let age = oChangeAddAge.value;
        let sept = oChangeSept.value;

        const arr = JSON.parse(window.localStorage.arr);
        arr.forEach((item) => {
          if (item.id === changeIndex) {
            item.name = name;
            item.phone = phone;
            item.eabg = eabg;
            item.age = age;
            item.sept = sept;
          }
        });

        window.localStorage.arr = JSON.stringify(arr);

        // 动态生成页面
        setPage();
        oDiv.style.display = "none";
      });

      oAddBtn1.addEventListener("click", function () {
        $("input").val("");
      });
      //  开始标签
      oAddBtn.addEventListener("click", function () {
        let name = oAddIptName.value;
        let phone = oAddPhone.value;
        let eabg = oAddEabg.value;
        let age = oAddIptAge.value;
        let sept = oAddSept.value;

        const arr = JSON.parse(window.localStorage.arr);
        arr.push({
          id: arr[arr.length - 1].id + 1,
          name,
          phone,
          eabg,
          age,
          sept,
        });

        window.localStorage.arr = JSON.stringify(arr);
        setPage();
      });
      // 给修改表单添加鼠标拖拽效果
      var oDiv = document.querySelector("div");
      var body = document.querySelector("body");
      // 计算最⼤偏移距离（后期判断边界时要⽤到）  oDiv.offsetWidth：表⽰div的宽度
      var maxLeft = window.innerWidth - oDiv.offsetWidth;
      var maxTop = window.innerHeight - oDiv.offsetHeight;
      // ⿏标按下事件
      oDiv.onmousedown = function (e) {
        var ev = e || event;
        //记录⿏标在元素上的位置
        var posX = ev.clientX - oDiv.offsetLeft;
        var posY = ev.clientY - oDiv.offsetTop;
        //⿏标移动事件
        body.onmousemove = function (e) {
          var ev = e || event;
          //计算元素的偏移
          var left = ev.clientX - posX;
          var top = ev.clientY - posY;
          //判断边界
          if (left < 0) {
            left = 0;
          } else if (left > maxLeft) {
            left = maxLeft;
          }
          if (top < 0) {
            top = 0;
          } else if (top > maxTop) {
            top = maxTop;
          }
          //重新设置属性
          oDiv.style.left = left + "px";
          oDiv.style.top = top + "px";
        };
        //⿏标抬起事件
        body.onmouseup = function () {
          body.onmousemove = null;
          body.onmouseup = null;
        };
      };

      function setPage() {
        const arr = JSON.parse(window.localStorage.arr);
        console.log(arr);

        // 根据数组动态生成页面
        if (arr.length === 0) {
          oTbody.innerHTML = '<tr><td colspan="7">没有匹配的数据了</td></tr>';
        } else {
          let str = "";
          arr.forEach(function (item) {
            str += `
                      <tr>
                          
                          <td>${item.name}</td>
                          <td>${item.phone}</td>
                          <td>${item.eabg}</td>
                          <td>${item.age}</td>
                          <td>${item.sept}</td>
                          <td><button name="del" index="${item.id}">删除</button></td>
                          <td><button name="change" index="${item.id}">修改</button></td>
                          </tr>
                      `;
          });
          oTbody.innerHTML = str;
        }
      }
    </script>
  </body>
</html>
